this.props.history.push 传参数 url、state 混合传参

2023-08-30 20:03| 来源: 网络整理| 查看: 265

1. url 传参

一般跳转传递 id 都放入 url 中

this.props.history.push(`/document-analysis/fans-list?id=${this.state.bloggerId}`)

地址栏显示

在这里插入图片描述在跳转接收页 this.props.location 打印的路由参数

在这里插入图片描述

2. state 传参

跳转时需要带其他较多数据，无法在 url 上携带，可以使用 state 传值

this.props.history.push({ pathname: `/document-analysis/concern-list`, state:this.state.bloggerId })

地址栏显示

在这里插入图片描述在跳转接收页 this.props.location 打印的路由参数

在这里插入图片描述

3. url、state 混合传参

当有 id 要在 url 中显示，又有较多其他数据携带时，可以使用混合传参

this.props.history.push({ pathname: `/document-analysis/concern-list`, search: this.state.bloggerId, state:this.state.bloggerId })

地址栏显示在这里插入图片描述在跳转接收页 this.props.location 打印的路由参数

在这里插入图片描述 search 属性会在 pathname 属性填写的路径后默认补一个问号？，需要显示在地址栏的信息可以写在 search 属性中

this.props.history.push({ pathname: `/document-analysis/concern-list`, search: `id=${this.state.bloggerId}`, state:this.state.bloggerId })

地址栏显示

在这里插入图片描述在跳转接收页 this.props.location 打印的路由参数

在这里插入图片描述

【本文地址】

今日新闻